<template>
    <div>
        <!--查询条件end-->
        <!--查询条件start --111s-->
        <el-card>
        <el-form :inline="true" :model="query"  class="query-form" size="small">
            <el-form-item>
                <el-button type="primary" icon="el-icon-edit" @click.native="brandlForm()">添加
                </el-button>
            </el-form-item>
        </el-form>
        <!--列表start --222s-->
        <el-table
            v-loading="loading"
            :data="list"
            :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
            border
        >
            <el-table-column label="序号"  type="index"  width="60"  align="center">
                <template scope="scope">
                    <span>{{(query.currentPage - 1) * query.pageSize + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="公司名称" prop="d" align="center" :show-overflow-tooltip="true"/>
            <el-table-column label="公司首席" prop="e" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini"  @click.native="detailForm(scope.row)" >查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--列表end --222e-->

        <!--分页模块start-->
        <el-pagination
            class="pagination-container"
            background
            :page-size="query.pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total,sizes,prev, pager, next, jumper"
            :current-page="query.currentPage"
            :page-sizes="[5,10, 20, 30, 50]"
            :total="totalNumber"
        ></el-pagination>
        <!--分页模块end-->

        <!--查看弹框start-->
        <el-dialog :title="formMap[formName]" :visible.sync="detailVisible" :before-close="hideDetailForm"
            width="50%" top="5vh"  :close-on-click-modal="false"  >
             <template slot="title">
                <div class="avue-crud__dialog__header">
                    <span class="el-dialog__title">
                        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                       {{formMap[formName]}}
                    </span>
                </div>
            </template>
            <el-card>
            <el-form >
                <el-form-item label-width="80px" label="基本信息" style="background: #e1e1e1"/>
                <el-form-item label-width="40px">
                    <el-form-item label-width="100px" label="发起合伙人：" style="width:50%;display: inline-block;">
                        <span>{{launchcompany.companyname}}</span>
                    </el-form-item>
                    <el-form-item label="首席合伙人：" style=" margin-left: 20px; width:30%;display: inline-block;">
                        <span>{{company.chiefpartnername}}</span>
                        <span v-if="company.isincubate==1">(孵化)</span>
                        <span v-if="company.isdisplacement==1">(顶替)</span>
                    </el-form-item>
                </el-form-item>

                <el-form-item label-width="100px" label="高级合伙人" style="background: #e1e1e1"/>
                <el-form-item>
                    <el-table
                        :data="seniorpartner"
                        :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                        border
                    >
                        <el-table-column label="序号"  type="index"  width="80"  align="center">
                            <template scope="scope">
                                <span>{{scope.$index + 1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="usernick" align="center" label="用户昵称" />
                        <el-table-column prop="usermobile" align="center" label="手机号" />
                        <el-table-column prop="enterprisename" align="center" label="营业执照" />
                    </el-table>
                </el-form-item>

                <el-form-item label-width="100px" label="普通合伙人" style="background: #e1e1e1"/>
                <el-form-item>
                    <el-table
                        :data="generalpartner"
                        :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                        border
                    >
                        <el-table-column label="序号"  type="index"  width="80"  align="center">
                            <template scope="scope">
                                <span>{{scope.$index + 1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="usernick" align="center" label="用户昵称" />
                        <el-table-column prop="usermobile" align="center" label="手机号" />
                        <el-table-column prop="enterprisename" align="center" label="营业执照" />
                    </el-table>
                </el-form-item>
            </el-form>
            </el-card>
        </el-dialog>
        <!--查看弹框end-->
        <!--意向公司列表弹框start-->
        <el-dialog :title="formMap[formName]" :visible.sync="brandVisible" :before-close="hideBrandlForm"
                   width="60%" top="5vh" :close-on-click-modal="false"  >
             <template slot="title">
                <div class="avue-crud__dialog__header">
                    <span class="el-dialog__title">
                        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                       {{formMap[formName]}}
                    </span>
                </div>
            </template>  
            <el-card>   
            <el-table
                v-loading="loading"
                :data="intentionBrandList"
                :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                border
            >
                <el-table-column label="序号"  type="index"  width="60"  align="center">
                    <template scope="scope">
                        <span>{{scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商户ID" prop="d" align="center" :show-overflow-tooltip="true"/>
                <el-table-column label="公司名称" prop="e" align="center" :show-overflow-tooltip="true" />
                <el-table-column label="手机号" prop="e" align="center" :show-overflow-tooltip="true" />
                <el-table-column label="总业绩" prop="e" align="center" :show-overflow-tooltip="true" />
                <el-table-column label="是否已发起申请" prop="e" align="center" :show-overflow-tooltip="true" />
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini"  @click.native="applyForm(scope.row)" >发起申请</el-button>
                    </template>
                </el-table-column>
            </el-table>
            </el-card>  
            <span slot="footer" class="dialog-footer">
                <el-button @click="hideBrandlForm">取 消</el-button>
            </span>
        </el-dialog>
        <!--意向公司列表弹框end-->

        <!--发起申请弹框start-->
        <el-dialog :title="formMap[formName]" :visible.sync="applyVisible" :before-close="hideApplyForm"
                   width="50%" top="5vh"  :close-on-click-modal="false" >
             <template slot="title">
                <div class="avue-crud__dialog__header">
                    <span class="el-dialog__title">
                        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                       {{formMap[formName]}}
                    </span>
                </div>
            </template>  
            <el-card>          
            <el-form  label-width="140px">
                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">
                    <el-form-item label="头像：" style="width:30%;display: inline-block">
                        <el-popover v-if="applyData.userpic" placement="right" trigger="hover">
                            <img :src="applyData.userpic" style="width:400px;border-radius:3px;">
                            <img slot="reference" :src="applyData.userpic" style="max-height: 80px;max-width: 50px;border-radius:5px;" >
                        </el-popover>
                        <span v-else>-</span>
                    </el-form-item>
                </el-form-item>
                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">
                    <el-form-item label="商户ID：" style="width:30%;display: inline-block;">
                        <input v-model="applyData.id" type="text" readonly>
                    </el-form-item>
                    <el-form-item label="公司名称：" style="margin-left:80px; width:30%;display: inline-block;">
                        <input v-model="applyData.usermobile" type="text" readonly>
                    </el-form-item>
                </el-form-item>
                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">
                    <el-form-item label="手机号：" style="width:30%;display: inline-block;">
                        <input v-model="applyData.id" type="text" readonly>
                    </el-form-item>
                    <el-form-item label="总业绩：" style="margin-left:80px; width:30%;display: inline-block;">
                        <input v-model="applyData.usermobile" type="text" readonly>
                    </el-form-item>
                </el-form-item>
            </el-form>
            </el-card>
            <span slot="footer" class="dialog-footer" style="text-align: center !important;">
                <el-button @click="applySubmit">发起申请</el-button>
            </span>
        </el-dialog>
        <!--发起申请弹框end-->
        </el-card>
    </div>
</template>
<script>

    export default {
        data() {
            return {
                query: {
                    //查询条件
                    content: "",
                    startTime: "",
                    endTime: "",
                    currentPage: 1,
                    pageSize: 5
                },
                list:[
                    {
                        a: '未审核',
                        b: '未生效',
                        c: '晋升平台合伙人',
                        d: '13888888888',
                        e: '品牌1',
                        f: 'XXXXX全球公司',
                        g: '全球公司高级合伙人',
                        h: '2021年1月19日16:32:39',
                        i: '2021年1月19日16:32:39',
                        j: '2021年1月19日16:32:39',
                    }],//列表集合
                totalNumber: 0, //分页总页数
                loading: true, //列表加载
                detailVisible: false,//详情弹窗
                formData: {}, //详情的对象

                brandVisible: false,//新建公司的弹窗
                intentionBrandList:[{
                    a: '未审核',
                    b: '未生效',
                    c: '晋升平台合伙人',
                    d: '13888888888',
                    e: '品牌1',
                    f: 'XXXXX全球公司',
                    g: '全球公司高级合伙人',
                    h: '2021年1月19日16:32:39',
                    i: '2021年1月19日16:32:39',
                    j: '2021年1月19日16:32:39',
                }],//有意向开品牌公司的列表
                brandLoading: true, //意向开品牌公司的列表加载

                applyVisible: false,//新建公司的弹窗
                applyData:{},//申请内容

                formName: null,
                formMap: {
                    detail: "查看详情",
                    reject: "驳回",
                    add: "新建品牌公司",
                },
                launchcompany:{},
                company:{},
                seniorpartner:[],
                generalpartner:[],
                entityinfo:{},
            };
        },
        methods: {

            /*获取列表事件*/
            getList() {
                this.loading = true;

                this.loading = false;
                // getList(this.query)
                //     .then(response => {
                //         if (response.code != 0) {
                //             this.$message.error(response.message);
                //             return false;
                //         }
                //         this.list = response.data.list || [];
                //         this.totalNumber = response.data.totalNumber || 0;
                //         setTimeout(() => {
                //             this.loading = false;
                //         }, 0.3 * 1000);
                //     })
                //     .catch(() => {
                //         this.loading = false;
                //         this.list = [];
                //     });
            },

            /*列表查询条件事件*/
            onSubmit() {
                this.query.currentPage = 1;
                this.getList();
            },

            /*刷新*/
            onRest() {
                //刷新事件需要重置查询条件
                this.createTime = [];
                this.query = {
                    currentPage: 1,
                    pageSize: 10
                };
                this.getList();
            },

            //显示 查看弹框
            detailForm(index, row) {
                if (row !== null) {
                    this.formData = Object.assign({}, row);
                    this.formName = "detail";
                    this.detailVisible = true;
                }
            },
            // 隐藏详情弹框
            hideDetailForm() {
                // 更改值
                this.detailVisible = !this.detailVisible;
                this.formData={};
                return true;
            },
            //意向公司列表弹窗开启
            brandlForm(){
                this.brandVisible=true;
                this.formName = "add";
                this.getIntentionBrandList();
            },
            //意向公司列表弹窗关闭
            hideBrandlForm(){
                this.brandVisible=!this.brandVisible;
                // this.intentionBrandList=[];
            },
            //获取意向公司列表
            getIntentionBrandList(){
                this.brandLoading=true;
                this.brandLoading=false;
            },
            //申请弹窗开启
            applyForm(){
                this.applyVisible=true;
            },
            //申请弹窗关闭
            hideApplyForm(){
                this.applyVisible=!this.applyVisible;
                this.applyData={};
            },
            //申请提交
            applySubmit(){

            },
            /*点击页数*/
            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.getList();
            },

            /*选择每页条数【10,20,30,40,50】*/
            handleSizeChange(val) {
                this.query.pageSize = val;
                this.getList();
            },
        },
        created() {
            this.getList();
        }
    };
    //跳转路由的方法
    // this.$router.push({
    //     path: "",
    //     query:{
    //         username:"张三"
    //     }
    // });
    //接受路由传递的参数
    //let query = this.$route.query;
</script>
<style>

    .el-dialog__footer {
        text-align: center !important;
    }


</style>
